<template>
  <div class="easemobChat">
    <el-button type="danger" icon="el-icon-chat-dot-round" circle class="chatBtn" @click="chatVisible = true"></el-button>
    <el-dialog title="即时聊天" top="3vh" :visible.sync="chatVisible" width="600px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <h2 class="left-align">Easemob Chat Examples</h2>
      <form id="loginForm">
        <div class="col" style="min-width: 433px; max-width: 443px">
          <div class="card" style="margin-top: 0px; margin-bottom: 0px">
            <div class="row card-content" style="margin-bottom: 0px; margin-top: 10px">
              <div class="input-field">
                <label>Username</label>
                <input type="text" placeholder="Username" id="userID" />
              </div>
              <div class="input-field">
                <label>Password</label>
                <input type="password" placeholder="Password" id="password" />
              </div>
              <div class="row">
                <div>
                  <button type="button" id="register">register</button>
                  <button type="button" id="login">login</button>
                  <button type="button" id="logout">logout</button>
                </div>
              </div>
              <div class="input-field">
                <label>Peer username</label>
                <input type="text" placeholder="Peer username" id="peerId" />
              </div>
              <div class="input-field">
                <label>Peer Message</label>
                <input type="text" placeholder="Peer message" id="peerMessage" />
                <button type="button" id="send_peer_message">send</button>
              </div>
            </div>
          </div>
        </div>
      </form>
      <hr />
      <div id="log"></div>
      <!-- <span slot="footer" class="dialog-footer">
        <el-button @click="confirm = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span> -->Tunguska The Visitation\Tunguska_Data\GameData\Cheats
    </el-dialog>
  </div>
</template>
<script>
import '@/plugins/easemob'; // 环信即时通讯
export default {
  data() {
    return {
      chatVisible: false,
    };
  },
};
</script>
<style lang="scss" scoped>
.easemobChat {
  position: relative;
  width: 100%;
  height: 100%;
  .chatBtn {
    font-size: 28px;
    position: fixed;
    bottom: 100px;
    right: 100px;
  }
}
</style>
